import { Card, Flex, Typography, Avatar, Space, Button } from 'antd'

const { Text } = Typography

const Index = () => {
  return (
    <Card
      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
      title="消防设施"
      styles={{
        body: {
          overflowX: 'auto',
        },
      }}
      extra={<Button type="link">更多</Button>}
    >
      <Space size={36}>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              // width={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            <Text type="secondary">干式灭火器4个</Text>
          </Space>
        </Flex>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            <Text type="secondary">水泵2个</Text>
          </Space>
        </Flex>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            {/* <Flex flex={1}></Flex> */}
            <Text type="secondary">云梯1个</Text>
          </Space>
        </Flex>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            <Text type="secondary">消防水管2个</Text>
          </Space>
        </Flex>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            <Text type="secondary">喷淋2个</Text>
          </Space>
        </Flex>
        <Flex vertical align="center">
          <Space direction="vertical" align="center">
            <Avatar
              size={100}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></Avatar>
            <Text type="secondary">消防栓1个</Text>
          </Space>
        </Flex>
      </Space>
    </Card>
  )
}

export default Index
